<template lang="">
    <div>
        <myheader/>
        <h2>用户中心</h2>
        <p>用户名：{{ user.username }}</p>
        <p>手机号：{{ user.mobile | mobilefilter }}</p>
        <p>头像：<van-image
        width="100"
        height="100"
        :src="url"</p>
        <p>上传头像：<van-uploader :after-read="upload"/></p>
        
    </div>
</template>
<script>
import myheader  from  '@/components/myheader'
export default {
    data(){
        return{
            user:{},
            userid:localStorage.getItem('userid'),
            url:''
        }
    },
    // 定义过滤器
    filters:{
        // 手机号隐藏中间6位
        mobilefilter(value){
            if(value){
                return value.slice(0,3)+"******"+value.slice(-3,-1)
            }
            return value
        }
    },
    methods: {
        // 获取用户
        getUserinfo(){
            this.axios.get('user/getuserinfo?userid='+this.userid).then(res=>{
                this.user = res.data.user
                this.url = this.upload_dir + this.userid + '/' + res.data.user.avater
            })
        },
       // 单文件上传
       upload(file){
           // 此时可以自行将文件上传至服务器
           let data = new FormData()
           data.append('file',file.file)
           data.append('userid',this.userid)
           this.axios.post('user/upload',data).then(res=>{
               // 更新展示图片的地址
               this.url = this.upload_dir + this.userid + '/' + res.data.filename
           })
       }
    },
    mounted() {
    this.getUserinfo()
  },
    components:{
        'myheader':myheader
    }
}
</script>
<style lang="">
    
</style>